<template>
	<view class="message-view">
		<!-- 分类 -->
		<view>
			<view class="menu-block">
				<block v-for="(item,i) in classmessageList" :key='i'>
					<view @click="selectClassmessage(i,item)" :class="{activetext:i===index}">{{item}}</view>
				</block>
			</view>
			<!-- 评价 -->
			<block v-for="(item,i) in discussList" :key='i'>
				<view class="message-dist">
					<view class="users-message">
						<view class="cont-name">
							<image :src="item.messagedata.avatarUrl" mode="widthFix"></image>
							<text>{{item.messagedata.nickName}}</text>
						</view>
						<!-- 时间 -->
						<view class="message-time">
							{{item.messagedata.time}}
						</view>
					</view>
					<view class="cont-name-text">
						<text>{{item.messagedata.usermess}}</text>
					</view>
				</view>
			</block>
		</view>
		<!-- 没有评论的情况 -->
		<view v-show="flag" class="claenpty">该商家还没有商品评论哦!</view>

	</view>
</template>

<script>
	import {
		discuss,
		shop,
		getdishes
	} from '../../../api/api/forshop.js'
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				// classmessageData: []
				index: 0,
				flag: false
			}
		},

		computed: {
			// classmessage: "速度不错"
			// merchantid: "5dfcf328da83f620e4077112"
			// messagedata: Object
			// avatarUrl: "https://wx.qlogo.cn/mmopen/vi_32/gOoHZweFNyhfiayrAibnDxtQ93UN3L4d4CKP9gaeFHeGGGcYK9bZoFp8JHkJnywiadQwalB5ESYgkibdFCDvKQMLbQ/132"
			// nickName: "星星点灯"
			// time: "2020-03-08"
			// usermess: "配送速度很快 味道也很不错 下次还要买这家的"
			...mapState(['discussList', 'classmessageList', 'merchantid']),
		},
		methods: {
			async selectClassmessage(i, item) {
			
				this.index = i
				let data
				if (item === '全部') {
					data = {
						merchantid: this.merchantid,
						
					}
				} else {
					data = {
						merchantid: this.merchantid,
						classmessage: item
					}
				}
				const {
					data: res
				} = await discuss(data)
				// if (!res) {
				// 	this.flag = true
				// } else {
				// 	this.flag = false
				// }	
							
							console.log('disc',this.classmessageList,res)
				if (res.length!==0) {
					this.flag = false				
				} else {
					this.flag = true				
				}					
				this.$store.commit('setDiscussList', res)
			}


		},
	}
</script>

<style scoped>
	.message-view {
		margin: 0 20upx 100upx 20upx;
	}

	.activetext {
		color: #4CD964;
		background: #ffdd00 !important;
		border: 1px solid #ffdd00 !important;
	}

	.menu-block view {

		background: #ffffff;
		border: 1px solid #c2c5cc;
		border-radius: 6upx;
		font-size: 25upx;
		color: #292c33;
		font-weight: bold;
		text-align: center;
		padding: 15upx;
		margin: 10upx 15upx 5upx 0;
	}

	.menu-block {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		/* margin-bottom: 20upx; */
	}

	/* 评价 */
	.users-message {
		display: flex;
		justify-content: space-between;
		height: 50upx;
		align-items: center;
		margin-bottom: 15upx;
	}

	.message-time {
		font-size: 25upx;
		color: #a8a8a8;
	}

	.cont-name image {
		width: 50upx !important;
		height: 50upx !important;
		border-radius: 50%;
		margin-right: 9upx;
	}

	.cont-name text {
		font-size: 30upx;
		color: #a8a8a8;
	}

	.cont-name {
		display: flex;
		align-items: center;
		height: 50upx;
	}

	.cont-name-text text {
		font-size: 27upx;
		color: #333333;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.message-dist {
		margin-top: 30upx;
		border-bottom: 1rpx solid #f8f8f8;
		padding-bottom: 25upx;
	}

	/* 没有评价 */
	.claenpty {
		font-size: 30upx;
		color: #cccccc;
		text-align: center;
		padding-top: 40upx;
	}
</style>
